<template>
    <div class="home">
        <Header :check="0" />
        <!-- <Banner /> -->
        <div class="home-page">

            <!-- Banner -->
            <div class="home-banner">
                <div class="swiper banner-swiper">
                    <div class="swiper-wrapper">
                        <div v-for="(item, index) in  3" :key="index" class="swiper-slide">
                            <div class="banner-item flex-center">
                                <img class="banner-bg" src="@/assets/images/banner_01.jpg" alt="">
                                <div class="container">
                                    <!-- <div class="banner-main">
                                        <div class="tt">中国住房金融服务领域</div>
                                        <div class="tt">中国住房金融服务领域</div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination banner-pagination"></div>
                </div>

            </div>
            <!-- Banner -->


            <div class="home-fourbox">
                <div class="container">
                    <div class="fourbox-main">
                        <div v-for="(item, index) in fourbox_arr" :key="index" class="fourbox-item">
                            <div class="fourbox-pic">
                                <img class="fourbox-img" :src="item.imgurl" alt="">
                            </div>
                            <div class="fourbox-cont">
                                <div class="tt">
                                    {{ item.title }}
                                </div>
                                <div class="dd">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 热门产品 -->

            <div class="home-hotbox">
                <div class="container">
                    <div class="hotbox-main">
                        <div class="hotbox-tt">
                            平台服务
                        </div>
                        <div class="hotbox-dd">
                            热门推荐最新上线合规运营的场景化服务系统
                        </div>
                        <div class="hotbox-list">
                            <div v-for="(item, index) in hotbox_arr" :key="index" class="hotbox-item">
                                <div class="tt">
                                    {{ item.title }}
                                </div>
                               <!-- <div class="dd">
                                    {{ item.desc }}
                                </div> -->
                                <div class="taglist">
                                    <div v-for="(vitem, vindex) in item.taglist" :key="vindex" class="tag flex-center">
                                        {{ vitem }}
                                    </div>
                                </div>
                                <div class="btn flex-center">
                                     <a href="/login">立即使用</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门产品 -->


            <!-- 服务 -->
            <div class="home-service">
                <div class="container">
                    <div class="service-main">
                        <div class="service-tt">
                            丰富安全业务产品及服务
                        </div>
                        <div class="service-dd">
                            专注金融科技，中国领先的住房金融科技服务商
                        </div>

                        <div class="service-cont">
                            <div class="service-vleft">
                                <img class="service-pic" src="@/assets/images/product_pic.jpg" alt="">
                                <!-- <div class="vleft-title">
                                    项目分类
                                </div> -->
                            </div>
                            <div class="service-vright">
                                <div v-for="(item, index) in service_arr" :key="index" class="service-item">
                                    <div class="tt">
                                        {{ item.title }}
                                    </div>
                                    <div class="dd">
                                        <div>
                                            {{ item.desc }}
                                        </div>
                                    </div>
                                    <div class="btn flex-center">
                                        <a href="/facebook">立即使用</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 服务 -->


            <!-- 解决方案 -->
            <div class="home-solution" style="display: none;">
                <div class="solution-container">
                    <div class="solution-main">
                        <div class="solution-tt">
                            服务住房金融行业的全栈解决方案
                        </div>
                        <div class="solution-dd">
                            “与用户共赢共生”的经营理念，为合伙人创造机会，成为中国领先的创新型金融科技服务平台
                        </div>
                        <div class="solution-cont">
                            <div class="swiper-button-prev solution-button-prev"></div>

                            <div class="swiper solution-swiper">
                                <div class="swiper-wrapper">
                                    <div v-for="(item, index) in solution_arr" :key="index" class="swiper-slide">
                                        <div class="solution-item">
                                            <div class="solution-pic">
                                                <div class="pic-box">
                                                    <img class="img" :src="item.imgurl" alt="">
                                                </div>
                                            </div>
                                            <div class="solution-text">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-button-next solution-button-next"></div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 解决方案 -->

            <!-- 关于我们 -->
            <div class="home-about">
                <div class="container">
                    <div class="about-main">
                        <div class="about-tt">
                            关于我们
                        </div>
                        <div class="about-dd">
                            深圳市耘融易互联网有限公司简介
                        </div>
                        <div class="about-cont">
                            <div class="about-vleft">
                                <div class="cont">
                                    深圳市耘融易互联网有限公司，创立于2023年，位于广东省深圳市。我司自成立后以诚信、规范、效率、安全为首要精神，
									为个人及企业提供赎楼、抵押、过桥等服务平台，以大数据风控，建立一套完整的业务操作和风险评估系统，注重风险控制，
									采取多种措施，提供便捷、快速、安全的服务，帮助客户解决现有资金问题，确保客户资金安全。我司与银行、企业保持良好的合作关系，
									努力开拓更多业务提供给客户，在为客户排忧解难的同时，也在不断提升自身的效益和能力，树立良好的商业信誉，使公司的发展不断提升和壮大。
                                </div>
                                <div class="btn flex-center">
                                    <a href="/about">更多</a>
                                </div>
                            </div>
                            <div class="about-vright">
                                <div class="about-pic">
                                    <div class="pic-box">
                                        <img class="img" src="@/assets/images/bg.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 关于我们 -->

            <!-- 合作伙伴 -->
            <div class="home-client" style="display: none;">
                <div class="container">
                    <div class="client-main">
                        <div class="client-tt">
                            合作伙伴
                        </div>
                        <div class="client-dd">
                            合作共赢，持续助力合作伙伴
                        </div>
                        <div class="client-list">
                            <div v-for="(item, index) in client_arr" :key="index" class="client-item">
                                <div class="client-pic">
                                    <div class="pic-box">
                                        <img class="img" :src="item.imgurl" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 合作伙伴 -->


            <!-- 联系我们 -->
            <div class="home-contact">
                <div class="container">
                    <div class="contact-main">
                        <div class="contact-text">
                            期待与您合作
                        </div>
                        <div class="contact-btn flex-center">
                            <a href="/contact">联系我们</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 联系我们 -->




            <!-- <div class="home-box">
            <div class="container">
                <div class="box-main">
                    <div class="swiper box-swiper">
                        <div class="swiper-wrapper">
                            <div v-for="(item, index) in 6" :key="index" class="swiper-slide">
                                <div class="box-item"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->




        </div>
        <Footer />
    </div>
</template>

<script>
import Swiper from "swiper";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";


// 图片

import img_v1 from "@/assets/images/icon_computer.png";
import img_v2 from "@/assets/images/icon_protect.png";
import img_v3 from "@/assets/images/icon_data.png";
import img_v4 from "@/assets/images/icon_money.png";

import img_v5 from "@/assets/images/bg.png";

import img_v6 from "@/assets/images/logo.jpg";

export default {
    name: "HomeView",
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            fourbox_arr: [
                {
                    imgurl: img_v1,
                    title: '产品优势',
                    desc: '多元化作业'
                },
                {
                    imgurl: img_v2,
                    title: '平台优势',
                    desc: '便捷、全国化服务'
                },
                {
                    imgurl: img_v3,
                    title: '团队优势',
                    desc: '专业、高效'
                },
                {
                    imgurl: img_v4,
                    title: '资金优势',
                    desc: '实时到账、合法合规'
                }
            ],
            hotbox_arr: [
                {
                    title: '耘易通',
                    desc: '多元化牌照输出',
                    taglist: [
						'实时到账',
                        '合法合规',
                        '多元化'
                    ]
                },
                {
                    title: '耘诉讼',
                    desc: '多元化牌照输出',
                    taglist: [
                        '体系完善',
                        '风险把控'
                    ]
                },
                {
                    title: '耘公证',
                    desc: '多元化牌照输出',
                    taglist: [
                        '在线公证',
                        '高效'
                    ]
                },
                {
                    title: '耘征信',
                    desc: '多元化牌照输出',
                    taglist: [
                        '数据精准',
                        '及时更新'
                    ]
                }
            ],
            service_arr: [
                {
                    title: '房抵',
                    desc: '针对传统房抵产品代理商以及房抵资方提供的客户管理解决方案'
                },
                {
                    title: '赎楼',
                    desc: '提供赎楼全周期系统解决方案'
                },
                {
                    title: '企业过桥',
                    desc: '为企业提供一站式金融服务，帮助企业降本增效、合规经营'
                },
                {
                    title: '专项垫资',
                    desc: '保障性住房转商品房垫资'
                },
                {
                    title: '居间服务',
                    desc: '为企业、个人提供一站式的金融咨询服务'
                },
                {
                    title: '工商需求',
                    desc: '为企业在工商要求方向的专项服务'
                }
            ],
            solution_arr: [
                {
                    imgurl: img_v5,
                    title: '科技优势',
                },
                {
                    imgurl: img_v5,
                    title: '科技优势',
                },
                {
                    imgurl: img_v5,
                    title: '科技优势',
                },
                {
                    imgurl: img_v5,
                    title: '科技优势',
                }
            ],
            client_arr: [
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                }, {
                    imgurl: img_v6,
                    title: '客户名称',
                },
                {
                    imgurl: img_v6,
                    title: '客户名称',
                }, {
                    imgurl: img_v6,
                    title: '客户名称',
                },
            ],
            swiper_banner: null,
            swiper_1: null,
        };
    },
    mounted() {
        this.initswier();
    },
    methods: {
        initswier() {
            this.swiper_banner = new Swiper(".banner-swiper", {
                pagination: {
                    el: ".swiper-pagination"
                },
            });
            this.swiper_1 = new Swiper(".solution-swiper", {
                slidesPerView: 3,
                spaceBetween: 30,
                navigation: {
                    nextEl: ".solution-button-next",
                    prevEl: ".solution-button-prev",
                },
                // Swiper的配置选项
                // 例如：slidesPerView, navigation, pagination等
            });
        }
    }
};
</script>
